<script>
// 引入三个子组件
import TopMenu from './TopMenu.vue'; // 顶部菜单组件
import MainA from './MainContent.vue'; // 主内容组件
import AsideMenu from './AsideMenu.vue'; // 侧边菜单组件

export default {
  components: {
    // 注册子组件
    TopMenu,
    MainA,
    AsideMenu
  },
  methods: {
    // 当 TopMenu 触发 submitUserSuccess 事件时，调用此方法
    handleSubmitUserSuccess() {
      // 检查 mainA 是否存在，调用其 fetchData 方法更新数据
      if (this.$refs.mainA) {
        this.$refs.mainA.fetchData();
      }
    }
  }
};
</script>

<template>
  <div id="AllContainer">
    <!-- 使用 Element UI 的 container 布局组件 -->
    <el-container style="height: 100vh;">
      <!-- 顶部区域 -->
      <el-header height="60px">
        <!-- TopMenu 子组件，监听 submitUserSuccess 事件 -->
        <TopMenu @submitUserSuccess="handleSubmitUserSuccess"></TopMenu>
      </el-header>

      <!-- 中间布局 -->
      <el-container>
        <!-- 侧边菜单 -->
        <el-aside width="200px" style="height: calc(100vh - 60px);">
          <!-- AsideMenu 子组件 -->
          <AsideMenu></AsideMenu>
        </el-aside>

        <!-- 主内容区域 -->
        <el-container>
          <el-main>
            <!-- MainA 子组件，使用 ref 引用以便调用其方法 -->
            <MainA ref="mainA"></MainA>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
/* 全局样式，定义容器中的主要部分的外观 */

/* 顶部和底部的背景样式 */
.el-header, .el-footer {
  background-color: #B3C0D1; /* 浅蓝色背景 */
  color: #333; /* 深色文字 */
  text-align: center; /* 居中对齐 */
  line-height: 60px; /* 行高 */
  padding: 0; /* 去除内边距 */
}

/* 顶部区域的特殊样式 */
.el-header {
  line-height: 100px; /* 行高设置为100px */
}

/* 侧边菜单的样式 */
.el-aside {
  background-color: #545c64; /* 深灰色背景 */
  color: #333; /* 深色文字 */
  text-align: center; /* 内容居中 */
  line-height: 200px; /* 行高 */
}

/* 主内容区域的样式 */
.el-main {
  background-color: #E9EEF3; /* 浅灰蓝背景 */
  color: #333; /* 深色文字 */
  text-align: center; /* 内容居中 */
  line-height: 160px; /* 行高 */
}

/* 顶级容器的样式 */
body > .el-container {
  margin-bottom: 40px; /* 底部外边距 */
}
</style>
